<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>复杂的背景图案</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    h1{
      margin: 0 auto;
      text-align: center;
    }
   div{
      width: 400px;
      height: 200px;
      margin: 0 auto;
    }
    #box1{
      background: white;
      background-image: linear-gradient(90deg,
        rgba(200,0,0,.5) 50% ,transparent 0),
        linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
      /*
        这里我们使用两个
      */
      background-size: 30px 30px;
    }

  </style>
</head>
<body>

<!--
  有时候，我们还需要其他不同类型的图案，比如网格、波点、棋盘等等。
  我们的css渐变在实现这些图案时，也可以大展拳脚。用css渐变来创建任何种类的几何图形几乎都是可能的。
  只不过有时候这种方式不大实际。所以建议使用css预处理器

-->
  <h1>网格</h1>
  <div id="box1">
  </div>

</body>
</html>